<!-- 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了) -->
<template>
  <div class="father">
    <h3>父组件，</h3>
    <Child
      :a="a"
      :b="b"
      :c="c"
      :d="d"
      :updateA="updateA"
      v-bind="{ x: 100, y: 200 }"
    ></Child>
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue'
// 数据
const a = ref(1)
const b = ref(2)
const c = ref(3)
const d = ref(4)
// 方法
function updateA(value: number) {
  a.value = value
}
</script>
